<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>算盘</title>
    <link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
    <link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
    <script src="../_assets/js/examples.js"></script>
    <script src="../lib/easeljs-NEXT.js"></script>   
    <!-- We also provide hosted minified versions of all CreateJS libraries.
      http://code.createjs.com -->
    <script src="../_assets/libs/preloadjs-NEXT.min.js"></script>

    <script id="editable">
        var update = true;
        var abacusContainer = new createjs.Container();
        var textNumContainer = new createjs.Container();
        var digit_visible = false;
        var read_visilbe = false;
        var write_visible = false;
        var topBeadArray = new Array();
        var bottomArray = new Array();
        var zeros = [1000000000,100000000,10000000,1000000,100000,10000,1000,100,10,1,0.1,0.01,0.001];
        var writeText= rendText1("",566.5,649);
        var readText = rendText1("",566.5,609);
        var model = 7;

        function init() {

            stage = new createjs.Stage("abacus");
            w = stage.canvas.width;
            h = stage.canvas.height;
            
            stage.enableMouseOver(10);
            manifest = [
                    {src: "answer.png", id: "answer"},//读数框
                    {src: "bead1.png", id: "bead"},//珠子
                    {src: "border.png", id: "border"},//边框
                    {src: "button1.png", id: "button1"},//按钮
                    {src: "button2.png", id: "button2"},
                    {src: "cudgel1.png", id: "cudgel1"},//
                    {src: "cudgel2.png", id: "cudgel2"},//
                    {src: "delete.png", id: "delete"},//清零

            ];


            loader = new createjs.LoadQueue(false);
            loader.addEventListener("complete", handleComplete);
            loader.loadManifest(manifest, true, "abacus-images/");
        }

        function handleComplete() {
            
            answerImg = loader.getResult("answer");
            beadImg = loader.getResult("bead");
            borderImg = loader.getResult("border");
            button1Img = loader.getResult("button1");
            button2Img = loader.getResult("button2");
            cudgel1Img = loader.getResult("cudgel1");
            cudgel2Img = loader.getResult("cudgel2");
            deleteImg = loader.getResult("delete");
            var buttonFive = rendModelButton(button1Img,50,0,button1Img.width,button1Img.height,0);
            var buttonSeven = rendModelButton(button2Img,70+button1Img.width,0,button2Img.width,button2Img.height,1);

            var fiveText = rendText1("五珠",75,button1Img.height);
            var sevenText = rendText1("七珠",95+button1Img.width,button1Img.height);

            var tContainer = new createjs.Container();

            stage.addChild(buttonFive,buttonSeven,fiveText,sevenText);
            rendSevenAbacus();
            stage.update();           

            createjs.Touch.enable(stage);
            createjs.Ticker.addEventListener("tick", tick);
            
        }

        function rendSevenAbacus(){
            var border = rendBorder(borderImg,100,100,borderImg.width,borderImg.height);

            var cudgel1 = rendCudgel(cudgel2Img,115+60,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel2 = rendCudgel(cudgel2Img,115+60*2,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel3 = rendCudgel(cudgel2Img,115+60*3,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel4 = rendCudgel(cudgel1Img,132+60*4,115,cudgel1Img.width,cudgel1Img.height);

            var cudgel5 = rendCudgel(cudgel2Img,115+60*5,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel6 = rendCudgel(cudgel2Img,115+60*6,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel7 = rendCudgel(cudgel2Img,115+60*7,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel8 = rendCudgel(cudgel2Img,115+60*8,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel9 = rendCudgel(cudgel2Img,115+60*9,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel10 = rendCudgel(cudgel1Img,132+60*10,115,cudgel1Img.width,cudgel1Img.height);
            var cudgel11 = rendCudgel(cudgel2Img,115+60*11,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel12 = rendCudgel(cudgel2Img,115+60*12,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel13 = rendCudgel(cudgel2Img,115+60*13,100,cudgel2Img.width,cudgel2Img.height);

            var board = rendAnswerBoard(answerImg,100+borderImg.width/2 - answerImg.width/2,100+borderImg.height+20,answerImg.width,answerImg.height);

            var button1 = rendButton(deleteImg,100+borderImg.width/2 - answerImg.width/2+30,100+borderImg.height+answerImg.height+60,deleteImg.width,deleteImg.height,15);
            var button2 = rendButton(button1Img,100+borderImg.width/2 - answerImg.width/4+30,100+borderImg.height+answerImg.height+60,button2Img.width,button2Img.height,16);
            var button3 = rendButton(button1Img,100+borderImg.width/2+30 ,100+borderImg.height+answerImg.height+60,button1Img.width,button1Img.height,17);
            var button4 = rendButton(button1Img,100+borderImg.width/2+answerImg.width/4+30,100+borderImg.height+answerImg.height+60,button1Img.width,button1Img.height,18);

            var text1 = rendText("清零",100+borderImg.width/2 - answerImg.width/2+30+deleteImg.width+20,100+borderImg.height+answerImg.height+60);
            var text2 = rendText("读作",100+borderImg.width/2 - answerImg.width/4+30+button1Img.width+15,100+borderImg.height+answerImg.height+60);
            var text3 = rendText("写作",100+borderImg.width/2+30+button1Img.width+15,100+borderImg.height+answerImg.height+60);
            var text4 = rendText("数位",100+borderImg.width/2+answerImg.width/4+30+button1Img.width+15,100+borderImg.height+answerImg.height+60);

            var textNum1 = rendTextNum("十",120+60*1,30);
            var textNum2 = rendTextNum("亿",120+60*1,60);
            var textNum3 = rendTextNum("亿",120+60*2,60);
            var textNum4 = rendTextNum("千",120+60*3,30);
            var textNum5 = rendTextNum("万",120+60*3,60);
            var textNum6 = rendTextNum("百",120+60*4,30);
            var textNum7 = rendTextNum("万",120+60*4,60);
            var textNum8 = rendTextNum("十",120+60*5,30);
            var textNum9 = rendTextNum("万",120+60*5,60);
            var textNum10 = rendTextNum("万",120+60*6,60);
            var textNum11 = rendTextNum("千",120+60*7,60);
            var textNum12 = rendTextNum("百",120+60*8,60);
            var textNum13 = rendTextNum("十",120+60*9,60);
            var textNum14 = rendTextNum("个",120+60*10,60);

            // var textNum15 = rendTextNum("百",120+60*3,30);
            // var textNum16 = rendTextNum("亿",120+60*3,60);
            // var textNum17 = rendTextNum("千",120+60*2,30);
            // var textNum18 = rendTextNum("亿",120+60*2,60);
            // var textNum19 = rendTextNum("兆",120+60,60);


            var digit_visible = false;
            var read_visilbe = false;
            var write_visible = false;

            textNumContainer.addChild(textNum1,textNum2,textNum3,textNum4,textNum5,textNum6,textNum7,textNum8,textNum9,textNum10,textNum11,textNum12,textNum13,textNum14);

            textNumContainer.visible = digit_visible;
            //readText.visible = read_visilbe;

            for(var i=0;i<13;i++){
                topBeadArray[i] = new Array();
                for(var j = 0;j<2;j++){
                    topBeadArray[i][j] = rendTopBead(beadImg,173+60*i,137+27*j,beadImg.width,beadImg.height,i,j);
                    topBeadArray[i][j].state = false;
                }
                
            }

            for(var i=0;i<13;i++){
                bottomArray[i] = new Array();
                for(var j = 0;j<5;j++){
                    bottomArray[i][j] = rendBottomBead(beadImg,173+60*i,370+27*(4-j),beadImg.width,beadImg.height,i,j);
                    bottomArray[i][j].state = false;
                }
                
            }

            abacusContainer.addChild(cudgel1,cudgel2,cudgel3,cudgel4,cudgel5,cudgel6,cudgel7,cudgel8,cudgel9,cudgel10,cudgel11,cudgel12,cudgel13,
                border,board,button1,button2,button3,button4,
                text1,text2,text3,text4,
                textNumContainer,writeText,readText
                );
            for(var i=0;i<13;i++){
                for(var j = 0;j<2;j++){
                    abacusContainer.addChild(topBeadArray[i][j]);
                }
                
            }

            for(var i=0;i<13;i++){
                for(var j = 0;j<5;j++){
                    abacusContainer.addChild(bottomArray[i][j]);
                }
                
            }

            abacusContainer.cache(0,0,w,h);
            stage.addChild(abacusContainer);
        }

        function rendFiveAbacus(){
            var border = rendBorder(borderImg,100,100,borderImg.width,borderImg.height);

            var cudgel1 = rendCudgel(cudgel2Img,115+60,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel2 = rendCudgel(cudgel2Img,115+60*2,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel3 = rendCudgel(cudgel2Img,115+60*3,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel4 = rendCudgel(cudgel1Img,132+60*4,115,cudgel1Img.width,cudgel1Img.height);

            var cudgel5 = rendCudgel(cudgel2Img,115+60*5,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel6 = rendCudgel(cudgel2Img,115+60*6,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel7 = rendCudgel(cudgel2Img,115+60*7,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel8 = rendCudgel(cudgel2Img,115+60*8,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel9 = rendCudgel(cudgel2Img,115+60*9,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel10 = rendCudgel(cudgel1Img,132+60*10,115,cudgel1Img.width,cudgel1Img.height);
            var cudgel11 = rendCudgel(cudgel2Img,115+60*11,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel12 = rendCudgel(cudgel2Img,115+60*12,100,cudgel2Img.width,cudgel2Img.height);
            var cudgel13 = rendCudgel(cudgel2Img,115+60*13,100,cudgel2Img.width,cudgel2Img.height);

            var board = rendAnswerBoard(answerImg,100+borderImg.width/2 - answerImg.width/2,100+borderImg.height+20,answerImg.width,answerImg.height);

            var button1 = rendButton(deleteImg,100+borderImg.width/2 - answerImg.width/2+30,100+borderImg.height+answerImg.height+60,deleteImg.width,deleteImg.height,15);
            var button2 = rendButton(button1Img,100+borderImg.width/2 - answerImg.width/4+30,100+borderImg.height+answerImg.height+60,button2Img.width,button2Img.height,16);
            var button3 = rendButton(button1Img,100+borderImg.width/2+30 ,100+borderImg.height+answerImg.height+60,button1Img.width,button1Img.height,17);
            var button4 = rendButton(button1Img,100+borderImg.width/2+answerImg.width/4+30,100+borderImg.height+answerImg.height+60,button1Img.width,button1Img.height,18);

            var text1 = rendText("清零",100+borderImg.width/2 - answerImg.width/2+30+deleteImg.width+20,100+borderImg.height+answerImg.height+60);
            var text2 = rendText("读作",100+borderImg.width/2 - answerImg.width/4+30+button1Img.width+15,100+borderImg.height+answerImg.height+60);
            var text3 = rendText("写作",100+borderImg.width/2+30+button1Img.width+15,100+borderImg.height+answerImg.height+60);
            var text4 = rendText("数位",100+borderImg.width/2+answerImg.width/4+30+button1Img.width+15,100+borderImg.height+answerImg.height+60);

            var textNum1 = rendTextNum("十",120+60*1,30);
            var textNum2 = rendTextNum("亿",120+60*1,60);
            var textNum3 = rendTextNum("亿",120+60*2,60);
            var textNum4 = rendTextNum("千",120+60*3,30);
            var textNum5 = rendTextNum("万",120+60*3,60);
            var textNum6 = rendTextNum("百",120+60*4,30);
            var textNum7 = rendTextNum("万",120+60*4,60);
            var textNum8 = rendTextNum("十",120+60*5,30);
            var textNum9 = rendTextNum("万",120+60*5,60);
            var textNum10 = rendTextNum("万",120+60*6,60);
            var textNum11 = rendTextNum("千",120+60*7,60);
            var textNum12 = rendTextNum("百",120+60*8,60);
            var textNum13 = rendTextNum("十",120+60*9,60);
            var textNum14 = rendTextNum("个",120+60*10,60);
            // var textNum15 = rendTextNum("百",120+60*3,30);
            // var textNum16 = rendTextNum("亿",120+60*3,60);
            // var textNum17 = rendTextNum("千",120+60*2,30);
            // var textNum18 = rendTextNum("亿",120+60*2,60);
            // var textNum19 = rendTextNum("兆",120+60,60);


            var digit_visible = false;
            var read_visilbe = false;
            var write_visible = false;

            textNumContainer.addChild(textNum1,textNum2,textNum3,textNum4,textNum5,textNum6,textNum7,textNum8,textNum9,textNum10,textNum11,textNum12,textNum13,textNum14);

            textNumContainer.visible = digit_visible;
            //readText.visible = read_visilbe;

            for(var i=0;i<13;i++){
                topBeadArray[i] = new Array();
                for(var j = 0;j<1;j++){
                    topBeadArray[i][j] = rendFiveTopBead(beadImg,173+60*i,137+27*j,beadImg.width,beadImg.height,i,j);
                    topBeadArray[i][j].state = false;
                }
                
            }

            for(var i=0;i<13;i++){
                bottomArray[i] = new Array();
                for(var j = 0;j<4;j++){
                    bottomArray[i][j] = rendFiveBottomBead(beadImg,173+60*i,370+27*(4-j),beadImg.width,beadImg.height,i,j);
                    bottomArray[i][j].state = false;
                }
                
            }

            abacusContainer.addChild(cudgel1,cudgel2,cudgel3,cudgel4,cudgel5,cudgel6,cudgel7,cudgel8,cudgel9,cudgel10,cudgel11,cudgel12,cudgel13,
                border,board,button1,button2,button3,button4,
                text1,text2,text3,text4,
                textNumContainer,writeText,readText
                );
            for(var i=0;i<13;i++){
                for(var j = 0;j<2;j++){
                    abacusContainer.addChild(topBeadArray[i][j]);
                }
                
            }

            for(var i=0;i<13;i++){
                for(var j = 0;j<5;j++){
                    abacusContainer.addChild(bottomArray[i][j]);
                }
                
            }

            abacusContainer.cache(0,0,w,h);
            stage.addChild(abacusContainer);
        }

        function tick(event) {
            // this set makes it so the stage only re-renders when an event handler indicates a change has happened.
            if (update) {
                update = false; // only update once
                stage.update(event);
            }
        }
  
        function rendBorder(img,x,y,width,height){
            var border = new createjs.Shape();
            border.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            border.x = x;
            border.y = y;
            //panel.cursor = "pointer";
            border.addEventListener("mousedown",function(event){
                abacusContainer.offset = {x:event.stageX - abacusContainer.x,y:event.stageY - abacusContainer.y}
            });

            border.addEventListener("pressmove",function(event){
                abacusContainer.x = event.stageX - abacusContainer.offset.x;
                abacusContainer.y = event.stageY - abacusContainer.offset.y;

                update = true;
            });
            
            return border;
        }

        function rendCudgel(img,x,y,width,height){
            var cudgel = new createjs.Shape();
            cudgel.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            cudgel.x = x;
            cudgel.y = y;
            //cudgel.cursor = "pointer";

            return cudgel;
        }

        function rendAnswerBoard(img,x,y,width,height){
            var board = new createjs.Shape();
            board.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            board.x = x;
            board.y = y;

            return board;
        }

        function rendButton(img,x,y,width,height,num){
            var button = new createjs.Shape();
            button.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            button.x = x;
            button.y = y;
            button.cursor = "pointer";


            button.addEventListener("mousedown",function(event){
                
                var child = stage.children[4];

                if(img == button1Img ){
                    child.removeChildAt(num);
                    var button = rendButton(button2Img,x,y,width,height,num);
                    child.addChildAt(button,num);
                    abacusContainer.updateCache();
                    update = true;
                }
                else if(img == button2Img){
                    child.removeChildAt(num);
                    var button = rendButton(button1Img,x,y,width,height,num);
                    child.addChildAt(button,num);
                    abacusContainer.updateCache();
                    update = true;
                }

                if(num == 18){
                    digit_visible = !digit_visible;
                    textNumContainer.visible = digit_visible;
                    abacusContainer.updateCache();
                    update = true;
                }

                else if(num == 15 && model == 7){
                    var p = 26;
                    for(var i=0;i<13;i++){
                        for(var j = 0;j<2;j++){   
                                child.children[p].x=173+60*i;
                                child.children[p].y=137+27*j;
                                topBeadArray[i][j].state = false;
                                p++;
                            }
                            
                        }

                    var k = 52;
                    for(var i=0;i<13;i++){
                        for(var j = 0;j<5;j++){
                            child.children[k].x=173+60*i;
                            child.children[k].y=370+27*(4-j)
                            bottomArray[i][j].state = false;
                            k++;
                        }
                        
                    }
                    read_visilbe = false;
                    write_visible = false;
                    digit_visible = false;

                    writeText.visible = write_visible;
                    writeText.text = "";
                    readText.visible = read_visilbe;
                    readText.text = "";


                    child.removeChildAt(16);
                    var button = rendButton(button1Img,100+borderImg.width/2 - answerImg.width/4+30,100+borderImg.height+answerImg.height+60,button2Img.width,button2Img.height,16);
                    child.addChildAt(button,16);

                    child.removeChildAt(17);
                    var button1 = rendButton(button1Img,100+borderImg.width/2+30 ,100+borderImg.height+answerImg.height+60,button1Img.width,button1Img.height,17);
                    child.addChildAt(button1,17);

                    abacusContainer.updateCache();
                    update=true;
                    
                    
                }

                else if(num == 15 && model == 5){
                    var p = 26;
                    for(var i=0;i<13;i++){
                        for(var j = 0;j<1;j++){   
                                child.children[p].x=173+60*i;
                                child.children[p].y=137+27*j;
                                topBeadArray[i][j].state = false;
                                p++;
                            }
                            
                        }

                    var k = 39;
                    for(var i=0;i<13;i++){
                        for(var j = 0;j<4;j++){
                            child.children[k].x=173+60*i;
                            child.children[k].y=370+27*(4-j)
                            bottomArray[i][j].state = false;
                            k++;
                        }
                        
                    }
                    read_visilbe = false;
                    write_visible = false;
                    digit_visible = false;

                    writeText.visible = write_visible;
                    writeText.text = "";
                    readText.visible = read_visilbe;
                    readText.text = "";

                    child.removeChildAt(16);
                    var button = rendButton(button1Img,100+borderImg.width/2 - answerImg.width/4+30,100+borderImg.height+answerImg.height+60,button2Img.width,button2Img.height,16);
                    child.addChildAt(button,16);

                    child.removeChildAt(17);
                    var button1 = rendButton(button1Img,100+borderImg.width/2+30 ,100+borderImg.height+answerImg.height+60,button1Img.width,button1Img.height,17);
                    child.addChildAt(button1,17);

                    abacusContainer.updateCache();
                    update=true;
                    
                    
                }

                else if(num == 16){
                    if(readText.text ==""){
                        readText.text = "零";
                    }

                    read_visilbe = !read_visilbe;
                    readText.visible = read_visilbe;
                    abacusContainer.updateCache();
                    update = true;
                }

                else if(num == 17){
                    //var writeTextNum = 0;
                    
                    if(writeText.text ==""){
                        writeText.text = 0;
                    }
                    
                    write_visible = !write_visible;
                    writeText.visible = write_visible;
                    abacusContainer.updateCache();
                    update = true;
                }

            });

            return button;
        }

        function rendTextNum(text,x,y){
            var text = new createjs.Text(text, "bold 30px Arial", "black");
            
            text.x = x;
            text.y = y;

            return text;
        }

        function rendText(text,x,y){
            var text = new createjs.Text(text, "bold 40px Arial", "black");
            
            text.x = x;
            text.y = y;
            
            return text;
        }

        function rendText1(text,x,y){
            var text = new createjs.Text(text, "bold 28px Arial", "black");
            text.textAlign = "center";
            text.x = x;
            text.y = y;
            
            return text;
        }

        function rendTopBead(img,x,y,width,height,i,j){
            var topBead = new createjs.Shape();
            topBead.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            topBead.x = x;
            topBead.y = y;
            topBead.cursor = "pointer";

            topBead.addEventListener("mousedown",function(event){
                //topBead.offset = {x:event.stageX - topBead.x,y:event.stageY - topBead.y}

                if(topBead.y < 190 && j == 0){
                    topBead.y = 233-27;
                    topBeadArray[i][1].y = 233;
                    topBeadArray[i][0].state = true;
                    topBeadArray[i][1].state = true;

                }
                else if(topBead.y < 190 && j == 1){
                    topBead.y = 233;
                    topBeadArray[i][1].state = true;
                }
                else if(topBead.y > 190 && j == 0){
                    topBead.y = 137;
                    topBeadArray[i][0].state = false;
                }
                else{
                    topBeadArray[i][0].y = 137;
                    topBead.y = 137+27;
                    topBeadArray[i][0].state = false;
                    topBeadArray[i][1].state = false;
                }

                var writeTextNum = 0;
                for(var k=0;k<13;k++){
                    for(var p=0;p<2;p++){
                        if(topBeadArray[k][p].state == true){
                            writeTextNum += 5*zeros[k];
                        }                           
                    }
                }

                for(var k=0;k<13;k++){
                    for(var p=0;p<5;p++){
                        if(bottomArray[k][p].state == true){
                            writeTextNum += zeros[k];
                        }                           
                    }
                }
                for(var top=0;top<13;top++){
                    if(topBeadArray[top][0].state && topBeadArray[top][1].state){
                    writeTextNum = "false";
                    }
                }
                writeTextNum = writeTextNum.toString();
                var array = splits(writeTextNum);
                if(array[1].length >3){
                    writeTextNum = Number(writeTextNum).toFixed(3);
                    array = splits(writeTextNum);
                    array[1] = array[1].slice(0,3);
                }

                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }
                var readTextStr=transform(writeTextNum);

                for(var k=0;k<array[0].length;k++){
                    if((k+1)%4==0){
                        array[0] = array[0].slice(0,array[0].length-k)+','+array[0].slice(array[0].length-k);
                    }
                }
                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }
                
                if(writeTextNum=="fa,lse"){
                    writeTextNum="";
                }
                writeText.text = writeTextNum;
                writeText.visible = write_visible;


                readText.text = readTextStr;       
                readText.visible = read_visilbe;   

                abacusContainer.updateCache();
                update = true;
            })

            return topBead;
        }

        function rendBottomBead(img,x,y,width,height,i,j){
            var bottomBead = new createjs.Shape();
            bottomBead.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            bottomBead.x = x;
            bottomBead.y = y;
            bottomBead.cursor = "pointer";

            bottomBead.addEventListener("mousedown",function(event){
                
                if(bottomArray[i][j].state == false){
                    var index = j;
                    for(;index<5;index++){
                        bottomArray[i][index].y = 298+27*(4-index);
                        bottomArray[i][index].state = true;
                    }
                }
                else{
                    var index = j;
                    for(;index>=0;index--){
                        bottomArray[i][index].y = 370+27*(4-index);
                        bottomArray[i][index].state = false;

                    }
                }

                var writeTextNum = 0;
                for(var k=0;k<13;k++){
                    for(var p=0;p<2;p++){
                        if(topBeadArray[k][p].state == true){
                            writeTextNum += 5*zeros[k];
                        }                           
                    }
                }

                for(var k=0;k<13;k++){
                    for(var p=0;p<5;p++){
                        if(bottomArray[k][p].state == true){
                            writeTextNum += zeros[k];
                        }                           
                    }
                }
                for(var top=0;top<13;top++){
                    if(topBeadArray[top][0].state && topBeadArray[top][1].state){
                    writeTextNum = "false";
                    }
                }
                
                writeTextNum = writeTextNum.toString();
                var array = splits(writeTextNum);
                if(array[1].length >3){
                    writeTextNum = Number(writeTextNum).toFixed(3);
                    array = splits(writeTextNum);
                    array[1] = array[1].slice(0,3);
                }

                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }
                var readTextStr=transform(writeTextNum);

                for(var k=0;k<array[0].length;k++){
                    if((k+1)%4==0){
                        array[0] = array[0].slice(0,array[0].length-k)+','+array[0].slice(array[0].length-k);
                    }
                }
                
                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }                

                if(writeTextNum=="fa,lse"){
                    writeTextNum="";
                }
                writeText.text = writeTextNum;
                writeText.visible = write_visible;


                readText.text = readTextStr;       
                readText.visible = read_visilbe;   

                abacusContainer.updateCache();
                update = true;
            })

            return bottomBead;
        }


        function rendFiveTopBead(img,x,y,width,height,i,j){
            var topBead = new createjs.Shape();
            topBead.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            topBead.x = x;
            topBead.y = y;
            topBead.cursor = "pointer";

            topBead.addEventListener("mousedown",function(event){
                //topBead.offset = {x:event.stageX - topBead.x,y:event.stageY - topBead.y}

                if(topBead.y < 190 && j == 0){
                    topBead.y = 233;
                    topBeadArray[i][0].state = true;
                }
                else if(topBead.y > 190 && j == 0){
                    topBead.y = 137;
                    topBeadArray[i][0].state = false;
                }

                var writeTextNum = 0;
                for(var k=0;k<13;k++){
                    for(var p=0;p<1;p++){
                        if(topBeadArray[k][p].state == true){
                            writeTextNum += 5*zeros[k];
                        }                           
                    }
                }

                for(var k=0;k<13;k++){
                    for(var p=0;p<4;p++){
                        if(bottomArray[k][p].state == true){
                            writeTextNum += zeros[k];
                        }                           
                    }
                }

                writeTextNum = writeTextNum.toString();
                var array = splits(writeTextNum);
                if(array[1].length >3){
                    writeTextNum = Number(writeTextNum).toFixed(3);
                    array = splits(writeTextNum);
                    array[1] = array[1].slice(0,3);
                }

                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }
                var readTextStr=transform(writeTextNum);

                for(var k=0;k<array[0].length;k++){
                    if((k+1)%4==0){
                        array[0] = array[0].slice(0,array[0].length-k)+','+array[0].slice(array[0].length-k);
                    }
                }
                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }

                writeText.text = writeTextNum;
                writeText.visible = write_visible;


                readText.text = readTextStr;       
                readText.visible = read_visilbe;   

                abacusContainer.updateCache();
                update = true;
            })

            return topBead;
        }

        function rendFiveBottomBead(img,x,y,width,height,i,j){
            var bottomBead = new createjs.Shape();
            bottomBead.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            bottomBead.x = x;
            bottomBead.y = y;
            bottomBead.cursor = "pointer";

            bottomBead.addEventListener("mousedown",function(event){
                
                if(bottomArray[i][j].state == false){
                    var index = j;
                    for(;index<4;index++){
                        bottomArray[i][index].y = 298+27*(3-index);
                        bottomArray[i][index].state = true;
                    }
                }
                else{
                    var index = j;
                    for(;index>=0;index--){
                        bottomArray[i][index].y = 370+27*(4-index);
                        bottomArray[i][index].state = false;

                    }
                }

                var writeTextNum = 0;
                for(var k=0;k<13;k++){
                    for(var p=0;p<1;p++){
                        if(topBeadArray[k][p].state == true){
                            writeTextNum += 5*zeros[k];
                        }                           
                    }
                }

                for(var k=0;k<13;k++){
                    for(var p=0;p<4;p++){
                        if(bottomArray[k][p].state == true){
                            writeTextNum += zeros[k];
                        }                           
                    }
                }

                writeTextNum = writeTextNum.toString();
                var array = splits(writeTextNum);
                if(array[1].length >3){
                    writeTextNum = Number(writeTextNum).toFixed(3);
                    array = splits(writeTextNum);
                    array[1] = array[1].slice(0,3);
                }

                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }
                var readTextStr=transform(writeTextNum);

                for(var k=0;k<array[0].length;k++){
                    if((k+1)%4==0){
                        array[0] = array[0].slice(0,array[0].length-k)+','+array[0].slice(array[0].length-k);
                    }
                }
                if(array[1]!=""){
                    writeTextNum = array[0]+"."+array[1];
                }
                else{
                    writeTextNum = array[0];
                }

                writeText.text = writeTextNum;
                writeText.visible = write_visible;


                readText.text = readTextStr;       
                readText.visible = read_visilbe;   

                abacusContainer.updateCache();
                update = true;
            })

            return bottomBead;
        }

        function transform(tranvalue){
            try{
                var i=1;
                var dw2 = new Array("","万","亿");//大单位
                var dw1 = new Array("十","百","千");//小单位
                var dw = new Array("零","一","二","三","四","五","六","七","八","九");//整数部分用
                //以下是小写转换成大写显示在合计大写的文本框中     
                //分离整数与小数
                var source = splits(tranvalue);
                var num = source[0];
                var dig = source[1];

                //转换整数部分
                var k1=0;//计小单位
                var k2=0;//计大单位
                var sum = 0;
                var str="";
                var len = source[0].length;//整数的长度
                for(i=1;i<=len;i++){
                    var n = source[0].charAt(len-i);//取得某个位数上的数字
                    var bn = 0;
                    if(len-i-1>=0){
                        bn = source[0].charAt(len-i-1);//取得某个位数前一位上的数字
                    }
                    sum = sum+Number(n);
                    if(sum!=0){
                        str = dw[Number(n)].concat(str);//取得该数字对应的大写数字，并插入到str字符串的前面
                        if(n=='0')sum = 0;
                    }
                    if(len-i-1>=0){//在数字范围内
                        if(k1!=3){//加小单位
                            if(bn!=0){
                                str = dw1[k1].concat(str);
                            }
                            k1++;
                        }else{//不加小单位，加大单位
                            k1=0;
                            var temp = str.charAt(0);
                            if(temp=="万" || temp=="亿")//若大单位前没有数字则舍去大单位
                                str = str.substr( 1, str.length-1);
                            str = dw2[k2].concat(str);
                            sum = 0;
                        }
                    }
                    if(k1==3)//小单位到千则大单位进一
                    { k2++;}
                }

                //转换小数部分
                var strdig="";
                
                if(dig!=""){
                    if(str == ""){
                        str+="零点";
                    }
                    else{
                        str+="点";
                    }
                    
                    var n1 = dig.charAt(0);
                    strdig += dw[Number(n1)];//加数字

                    var n2 = dig.charAt(1);
                    strdig += dw[Number(n2)];//加数字
            
                    var n3 = dig.charAt(2);
                    strdig += dw[Number(n3)];//加数字
                    if(strdig.charAt(2)=="零" && strdig.charAt(1)=="零"){
                        strdig = strdig.slice(0,1);
                    }
                    else if(strdig.charAt(2)=="零"){
                        strdig = strdig.slice(0,2);
                    }
                    str += strdig;
                }
            }catch(e){
                return "不允许两个上珠靠梁";
            }
            return str;
        }

        //拆分整数与小数
        function splits(tranvalue){
            var value = new Array('','');
            temp = tranvalue.split(".");
            for(var i=0;i<temp.length;i++){
                value[i] = temp[i];
            }
            return value;
        }

         function rendModelButton(img,x,y,width,height,num){
            var button = new createjs.Shape();
            button.graphics.beginBitmapFill(img).drawRect(0,0,width,height);
            button.x = x;
            button.y = y;
            button.cursor = "pointer";


            button.addEventListener("mousedown",function(event){
                stage.removeChildAt(num);
                var button = rendModelButton(button2Img,x,y,width,height,num);
                stage.addChildAt(button,num);

                if(num == 0){
                    writeText.text = "";
                    readText.text = "";
                    write_visible = false;
                    read_visilbe = false;
                    digit_visible = false;

                    abacusContainer.removeAllChildren();
                    abacusContainer.updateCache();
                    stage.removeChildAt(1,4);

                    
                    model = 5;
                    var button = rendModelButton(button1Img,70+button1Img.width,y,width,height,1);
                    stage.addChildAt(button,1);

                    rendFiveAbacus();
                    update = true;
                    
                }
                else{
                    writeText.text = "";
                    readText.text = "";
                    write_visible = false;
                    read_visilbe = false;
                    digit_visible = false;

                    abacusContainer.removeAllChildren();
                    abacusContainer.updateCache();
                    stage.removeChildAt(0,4);
                    
                    model = 7;
                    var button = rendModelButton(button1Img,50,y,width,height,0);
                    stage.addChildAt(button,0);
                    rendSevenAbacus();
                    update = true;
                }

                abacusContainer.updateCache();
                update = true;
            });

            button.cache(0,0,w,h);

            return button;
        }

       

    </script>
</head>
<body onload="init();">
    <div>
        <canvas id="abacus" width="1200" height="900" style="background: white"></canvas>
    </div>
</body>
</html>